<template>
  <div class="message-container">
    <div class="message-search">
      <span class="page-title">系统消息列表</span>
      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="用户昵称" value="1"></el-option>
          <el-option label="消息标题" value="2"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchMessage">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
      <el-button type="success" size="small" icon="el-icon-plus" @click="handelAdd"
                 v-if="checkPermissionPoints(1) == 1">新增
      </el-button>
    </div>

    <div class="message-table">
      <el-table ref="multipleTable" :data="messageData" border stripe fit v-loading="listLoading"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}">
        <el-table-column prop="id" label="id" width="80">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" width="150">
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column label="消息标题" width="600">
          <template slot-scope="scope">
            {{scope.row.informationTitle}}
          </template>
        </el-table-column>
        <el-table-column label="发送时间" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{scope.row.time | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="读取时间" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.setTime">{{scope.row.setTime | formatTime}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleDelete(row)" v-if="checkPermissionPoints(2) == 1">删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getMsgList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="message-dialog look-dialog">
      <el-form ref="form" label-width="140px" size="mini">
        <el-form-item label="用户昵称：">
          <span>{{lookMessage.userName}}</span>
        </el-form-item>
        <el-form-item label="消息标题：">
          <span>{{lookMessage.informationTitle}}</span>
        </el-form-item>
        <el-form-item label="消息内容：">
          <span v-html="lookMessage.informationDetails"></span>
        </el-form-item>
        <el-form-item label="消息类型：">
          <span>{{lookMessage.type | changeType}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--新增-->
    <el-dialog title="新增" :lock-scroll="true" :visible.sync="dialogEditVisible" width="960px"
               class="message-dialog" top="11vh" @close="closeMessage">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" size="mini">
        <el-form-item label="消息标题:" prop="informationTitle">
          <el-input style="width: 640px;" placeholder="请输入消息标题" v-model="ruleForm.informationTitle"
                    :clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="消息内容:" prop="informationDetails">
          <el-input type="textarea" style="width: 640px;" placeholder="请输入消息内容" v-model="ruleForm.informationDetails"
                    :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
        </el-form-item>
        <el-form-item label="消息类型:" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="1">系统消息</el-radio>
            <el-radio :label="2">个人消息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户:" style="margin-top: 4px" prop="userName" v-show="ruleForm.type == 2">
          <el-input v-model="ruleForm.userName" style="width: 640px;" placeholder="请选择用户" :disabled="true"
                    class="input-with-select" @click.native="openBelongerView">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="success" style="width: 96px" @click="saveMessage" :loading="sendLoad">保存
        </el-button>
        <el-button size="small" style="width: 96px" @click="closeMessage">取消</el-button>
      </div>
    </el-dialog>

    <!--归属人-->
    <belonger :belongerView="belongerView" @closeBelonger="closeBelonger" @selectBelonger="selectBelonger"></belonger>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {baseUrl} from "@/api/constant";
  import {formatDate} from "@/utils/index";
  import belonger from '@/components/common/belonger';
  import {addMsg, deleteMsg, getInitMsgList, getMsgDetail} from "../../../api/service/service";

  export default {
    name: "message",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    components: {
      Pagination,
      belonger
    },
    data() {
      var checkUser = (rule, value, callback) => {
        if (this.ruleForm.type == 2) {
          if (this.ruleForm.userName === '' || this.ruleForm.userName == undefined) {
            callback(new Error('请选择用户'));
          }
          callback();
        } else {
          callback();
        }
      };
      return {
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          userName: '',
          informationTitle: ''
        },
        keyWords: '',
        select: '1',
        listLoading: false,
        dialogLookVisible: false,
        dialogEditVisible: false,
        belongerView: false,
        messageData: [],
        lookMessage: {},
        ruleForm: {
          informationTitle: '',
          informationDetails: '',
          type: 1,
          userId: '',
          userName: ''
        },
        rules: {
          informationTitle: [
            {required: true, message: '请输入消息标题', trigger: 'blur'}
          ],
          informationDetails: [
            {required: true, message: '请输入消息内容', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请选择消息类型', trigger: 'change'}
          ],
          userName: [
            {validator: checkUser, trigger: 'change'}
          ]
        },
        sendLoad: false
      }
    },
    created() {
      this.getMsgList();
    },
    methods: {
      searchMessage() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.userName = '';
        this.listQuery.informationTitle = '';
        if (this.select == 1) {
          this.listQuery.userName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.informationTitle = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getMsgList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.userName = '';
        this.listQuery.informationTitle = '';
        this.listQuery.page = 1;
        this.getMsgList();
      },
      getMsgList() {
        this.listLoading = true;
        getInitMsgList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.messageData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      openBelongerView() {
        this.belongerView = true;
      },
      closeBelonger() {
        this.belongerView = false;
      },
      selectBelonger(belonger) {
        const {id, userName} = belonger;
        this.ruleForm.userId = id;
        this.ruleForm.userName = userName;
        this.closeBelonger();
      },
      handelAdd() {
        this.dialogEditVisible = true;
      },
      closeMessage() {
        this.dialogEditVisible = false;
        this.$refs.ruleForm.resetFields();
      },
      saveMessage() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.sendLoad = true;
            if (this.ruleForm.type == 1) {
              this.ruleForm.userId = '';
              this.ruleForm.userName = '';
            }
            addMsg(this.ruleForm).then((res) => {//新增
              let retObj = res;
              this.sendLoad = false;
              if (retObj.code == 0 && retObj.data == 1) {
                this.dialogEditVisible = false;
                this.$refs.ruleForm.resetFields();
                this.$message.success({message: '新增成功', duration: 2000});
                this.getMsgList();
              } else {
                this.$message.error({message: '新增失败，请重试', duration: 2000});
              }
            }).catch(() => {
              this.sendLoad = false;
            })
          } else {
            return false;
          }
        });
      },
      handleLook(row) {//详细信息
        this.dialogLookVisible = true;
        getMsgDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.lookMessage = retObj.data;
            this.lookMessage.informationDetails = retObj.data.informationDetails.replace(new RegExp("#", "gm"), "");
          }
        })
      },
      handleDelete(row) {//删除
        this.$confirm('此操作将删除该系统消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMsg(row.id).then((res) => {
            let retObj = res;
            if (retObj.code == 0 && retObj.data > 0) {
              this.$message.success({message: '删除成功', duration: 2000});
              this.getMsgList();
            } else {
              this.$message.error({message: '删除失败，请重试', duration: 2000});
            }
          })
        }).catch(() => {
        });
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.message;
        return permissionPoints(type, pointObj);
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
      changeType(type) {//1系统2其它3门店消息4邀请店员消息5绑定银行卡6圈子评论
        if (type == 1) {
          return '系统消息';
        } else {
          return '个人消息';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message-container {
    .message-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 18px;
        min-width: 160px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .excel-inout-box {
        margin-left: auto;
        margin-right: 18px;
      }
    }

    .message-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .message-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .message-dialog {
      font-size: 14px;
      color: #606266;
      .input-with-select {
        > > > .el-input__inner {
          color: #333;
        }
      }
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>
